<template>
    <el-button type="success" @click="dialogFormVisible = true">
        新增
    </el-button>
    <el-button type="success" @click="test">
        测试
    </el-button>
    <hr>
    <el-table :data="tableData.data" stripe style="width: 100%">
        <el-table-column prop="id" label="id" width="180" />
        <el-table-column prop="name" label="name" width="180" />
        <el-table-column prop="age" label="age" />
        <el-table-column prop="sex" label="sex" />
        <el-table-column label="Operations" width="120">
            <template #default="scope">
                <el-popconfirm @confirm="del(scope.row)" title="您确定要删除吗?">
                    <template #reference>
                        <el-button  text type="primary" size="small">删除</el-button>
                        <el-button @click="del(scope.row)"  text type="primary" size="small">删除</el-button>
                    </template>
                </el-popconfirm>

                <!-- <el-button link type="primary" size="small">Edit</el-button> -->
            </template>
        </el-table-column>
    </el-table>
    <el-pagination @current-change="change" :page-size="5" background layout="prev, pager, next" :total="total" />

    <el-dialog v-model="dialogFormVisible" title="新增学生">
        <el-form :model="form">
            <el-form-item label="姓名" :label-width="50">
                <el-input v-model="form.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="年龄" :label-width="50">
                <el-input v-model="form.age" autocomplete="off" />
            </el-form-item>
            <el-form-item label="性别" :label-width="50">
                <el-radio-group v-model="form.sex">
                    <el-radio label="男" size="large">男</el-radio>
                    <el-radio label="女" size="large">女</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="add">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { onMounted, reactive,ref } from 'vue'
import { getStudent2, addStudent,delStudent } from '../../Api/student'
import { ElTable, ElTableColumn, ElPagination, ElButton, ElDialog, ElMessage, ElForm, ElInput, ElFormItem, ElRadio, ElRadioGroup,ElPopconfirm } from 'element-plus';

const tableData = reactive({ data: [] });
const count = 5;
const page = ref(1);
const total = ref(0);
const dialogFormVisible = ref(false)//控制弹出框的显示隐藏
const form = reactive({ name: '', sex: "男", age: '' })

const change = (currentpage: number) => {
    page.value = currentpage;
    getStudent();
}
const getStudent = async () => {
    /* 
    //前端分页
    const {data,msg}=await getStudent();
    //把proxy对象，变成了普通对象
    //tableData=data;
    tableData.data=data; */
    //后台分页
    const { data, msg, _total } = await getStudent2({ count, page: page.value });
    console.log(data, msg, _total);
    tableData.data = data;
    total.value = _total;
}

const add = async () => {
    const { msg } = await addStudent(form);
    if (msg === 'success') {
        ElMessage({
            type: 'success',
            message: '添加成功'
        })
    }
    dialogFormVisible.value = false;

}

const del =async (row:{id:string}) => {
    const {msg}=await delStudent({id:row.id});
    if (msg === 'success') {
        ElMessage({
            type: 'success',
            message: '删除成功'
        })
    }
    getStudent();
}

const test=()=>{
    
}

onMounted(() => {
    getStudent();
})
</script>

<!-- 
   arr.slice(开始位置，结束位置)
   1   0,5
   2   5，10
   page   (page-1)*count  page*count


-->